<template>
  <MainLayout>
    <view class="page">
      <!-- Banner -->
      <view class="banner">
        <swiper
            class="banner-swiper"
            indicator-dots
            autoplay
            interval="5000"
            duration="1000"
            circular
        >
          <swiper-item>
            <image src="/static/icons/banner01.png" class="banner-image" mode="aspectFill" />
          </swiper-item>
          <swiper-item>
            <image src="/static/icons/banner02.png" class="banner-image" mode="aspectFill" />
          </swiper-item>
          <swiper-item>
            <image src="/static/icons/banner03.png" class="banner-image" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>

      <!-- 功能图标区 -->
      <view class="functions">
        <view class="function-item" @click="toAiQa">
          <text>智能板块</text>
        </view>
        <view class="function-item">
          <text>学习板块</text>
        </view>
      </view>

      <!-- 养生建议模块 -->
      <view class="card health-tips">
        <view class="card-title">养生建议</view>
        <text class="card-content">
          减少内耗：遇事少纠结，多行动。给自己确定目标并分解任务，
          把思考变成行动力...提升心理健康。
        </text>
      </view>

      <!-- 随机模块 -->
      <view v-if="randomModule" class="card">
        <view class="card-title">{{ randomModule.title }}</view>
        <text class="card-content">{{ randomModule.content }}</text>
      </view>
    </view>
  </MainLayout>
</template>

<script setup>
import MainLayout from '../../layout/MainLayout.vue'
import { ref, onMounted } from 'vue'

const toAiQa = () => {
  uni.navigateTo({
    url: '/pages/ai-qa/ai-qa'
  })
}

// 定义模块列表
const modules = [
  {
    title: '药材百科',
    content: '人参：味甘微苦，性微温，大补元气、复脉固脱、补脾益肺、生津养血、安神益智，适用于体虚欲脱、肢冷脉微等症。'
  },
  {
    title: '养生食谱',
    content: '当归红枣乌鸡汤：将当归、红枣与乌鸡同炖，具有补血活血、调经止痛之效，适合气血不足、月经不调者食用。'
  },
  {
    title: '中药禁忌',
    content: '服用含有人参的方剂时，应避免同时食用萝卜、饮用浓茶，以免影响人参的补气效果。'
  },
  {
    title: '节气养生',
    content: '立冬后宜多食温热食物，如羊肉、栗子等，同时注意保暖，可适当进行艾灸关元、足三里等穴位以温阳益气。'
  }
]

const randomModule = ref(null)

// 随机选择模块
const getRandomModule = () => {
  const index = Math.floor(Math.random() * modules.length)
  randomModule.value = modules[index]
}

onMounted(() => {
  getRandomModule()
})
</script>

<style scoped lang="scss">

/* 卡片样式 */
.card {
  width: 100%;
  margin-bottom: 10px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  color: #2d2d2d;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.card-content {
  color: #444;
  font-size: 18px;
  line-height: 1.8;
  text-indent: 2em;
}

/* 功能按钮样式 */
.function-item {
  text-align: center;
  flex: 1;
  background-color: #f5e6c7;
  border-radius: 16px;
  height: 100%;
  margin: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.function-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* 添加悬停效果 */
.function-item:hover {
  background-color: #f3e3b8;
  transform: translateY(-1px);
}

/* 响应式字体 */
@media (min-width: 375px) {
  .function-item {
    font-size: 22px;
  }
  .card-title {
    font-size: 24px;
  }
  .card-content {
    font-size: 19px;
  }
}

@media (min-width: 414px) {
  .function-item {
    font-size: 24px;
  }
  .card-title {
    font-size: 26px;
  }
  .card-content {
    font-size: 20px;
  }
}

.page {
  width: 100%;
  height: 100vh;
  background-color: #F8F4E9;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.banner {
  margin-top: 50px;
  height: 30%;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.banner-swiper {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.functions {
  height: 15%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  box-sizing: border-box;
}

/* 刘海屏适配 */
@supports (padding: env(safe-area-inset-top)) {
  .page {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .banner {
    height: calc(30% + env(safe-area-inset-top));
  }

  .functions {
    margin-top: env(safe-area-inset-top);
  }
}
</style>